<template xmlns:div="http://www.w3.org/1999/html">
  <n-modal v-model:show="isVisible" title="添加采购单" preset="dialog" @close="onClose" @update:show="onClose" style="height: 420px;width: 700px">
    <n-form @submit.prevent="handleSubmit" label-width="120px" class="form-container">
      <div class="form-row" style="margin-top: 20px">
        <n-form-item label="采购产品：" path="productId">
          <n-select
            v-model:value="form.productId"
            :options="products"
            style="width: 200px"></n-select>
        </n-form-item>
        <n-form-item label="采购数量：" path="quantity" style="margin-left: 20px">
          <n-input v-model:value="form.quantity" placeholder="请输入采购数量" style="width: 200px"/>
        </n-form-item>
        <n-form-item label="花费金额：" path="price" style="margin-left: 20px">
          <n-input v-model:value="form.price" placeholder="请输入花费金额" style="width: 200px"/>
        </n-form-item>
      </div>

      <div class="form-row">
        <n-form-item label="入库仓库：" path="storeId">
          <n-select
              v-model:value="form.storeId"
              :options="stores"
              style="width: 420px"></n-select>
        </n-form-item>
        <n-form-item label="供货商：" path="supplierId" style="margin-left: 20px">
          <n-select
            v-model:value="form.supplierId"
            :options="suppliers"
            style="width: 200px">
          </n-select>
        </n-form-item>
      </div>
      <div class="form-row" style="margin-top: 20px">
        <n-form-item label="联系人：" path="adminId">
          <n-select
              v-model:value="form.adminId"
              :options="contactPersons"
              style="width: 350px"></n-select>
        </n-form-item>
        <n-form-item label="联系电话：" path="contactPhone" style="margin-left: 20px">
          <n-input v-model:value="form.contactPhone" placeholder="请输入联系电话" style="width: 350px"/>
        </n-form-item>
      </div>

      <!-- 提交按钮 -->
      <div class="submit-row">
        <n-form-item>
          <n-button type="primary" native-type="submit" @click="handleSubmit">提交</n-button>
        </n-form-item>
      </div>
    </n-form>
  </n-modal>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import {useRouter} from 'vue-router';
import {useUserStore} from "@/store/index.js";
import api from '@/api/admin'
import {List} from "echarts";
import {formatDate, formatDateTime} from "@/utils";
import {NCascader} from 'naive-ui'

const router = useRouter()
const userStore = useUserStore()
const id = userStore.getId();
const loading = ref(true)

const emit = defineEmits(['updatePage'])
const props = defineProps({
  show: {
    type: Boolean,
    required: true,
  },
  onClose: {
    type: Function,
    required: true,
  },
  option: {
    type: List,
    require: true
  },
  products: {
    type: Array,
    required: true
  },
  stores: {
    type: Array,
    required: true
  },
  suppliers: {
    type: Array,
    required: true
  },
  contactPersons: {
    type: Array,
    required: true
  }
});
const statusOptions=ref([
  {
    label: '未通过',
    value:'未通过',
  },
  {
    label:'未进行',
    value: '未进行',
  },
  {
    label: '进行中',
    value: '进行中',
  },
  {
    label: '已完成',
    value: '已完成',
  }
])
const isVisible = ref(props.show);
watch(() => props.show, (newVal) => {
  isVisible.value = newVal;
});

const form = ref({
  productId:null,
  storeId:null,
  quantity:'',
  price:'',
  supplierId:null,
  contactPhone:'',
  adminId:null
});

const handleSubmit = async () => {
  try {
    const res = await api.addPurchaseOrder(
      {
        ...form.value,
        status:"待采购"
      }
    )
    if(res.code === 200) {
      emit("updatePage")
    }
    else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("添加采购单失败！")
  }finally{
    clear()
    props.onClose();
  }
};
const clear = () => {
  form.value.adminId = null
  form.value.productId = null
  form.value.storeId=null
  form.value.supplierId=null
  form.value.price=""
  form.value.quantity=""
  form.value.contactPhone=""
}

</script>
<style scoped>
    .form-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .form-row {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .form-row > n-form-item {
        flex: 1;
    }

    .submit-row {
        justify-content: center;
        display: flex;
        width: 100%;
    }
</style>
